<template>
  <div>
    <st-header></st-header>
    <div class="box-center1">
      <div class="sideEdge">
        <div v-for="(item,index) in  list" @click="changeItem(item)" :key="index" class="box-side " :class="{'box-side-info':active!==item.id}">
          {{ item.name }}
        </div>
      </div>
      <div class="right" v-loading="loading">
        <router-view></router-view>
      </div>
    </div>
<!--    <div class="box-center">-->
<!--      <div class="center-1">-->
<!--        <a href="javascript:void (0)" v-routers="{path:item.path}" v-for="(item,index) in list" :key="index" class="box-card">-->
<!--          <img :src='item.img' alt="">-->
<!--          <div class="title">{{ item.name }}</div>-->
<!--          <div class="content">-->
<!--            {{item.tip }}-->
<!--          </div>-->
<!--        </a>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
  import headerPc from '../components/header.vue'
  export default {
    components:{headerPc},
    data(){
      return{
        active:10,
        loading:false,
        list:[
          {id:10,name:'我的首页',path:'/index',img:require('@/assets/image/1.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
          {id:11,name:'任务管理',path:'/admin/index',img:require('@/assets/image/2.jpg'),show:true,tip:'走进秋日的园林，首先映入眼帘的是那一片灿烂的金黄。'},
          {id:12,name:'进入课室',path:'/teacher/index',img:require('@/assets/image/3.jpg'),show:true,tip:'银杏树像是被大自然的画笔精心描绘过一般，满树的黄叶在阳光的照耀下熠熠生辉。'},
          {id:13,name:'用户管理',path:'/member/index',img:require('@/assets/image/1.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
          {id:14,name:'考勤管理',path:'/attend/index',img:require('@/assets/image/4.jpg'),show:true,tip:'微风吹过，树叶纷纷飘落，如同一只只金色的蝴蝶在空中翩翩起舞，给大地铺上了一层柔软的金色地毯。'},
          // {id:5,name:'进入课室',path:'/teacher',img:require('@/assets/image/5.jpg'),show:true,tip:'枫叶也不甘示弱，红得似火，热烈而奔放。那一片片鲜艳的红叶，仿佛是燃烧的火焰，点亮了整个园林。'},
          // {id:6,name:'学生评分',path:'/member',img:require('@/assets/image/6.jpg'),show:true,tip:' 与金黄的银杏叶相互映衬，构成了一幅色彩斑斓的绝美画面。'},
          // {id:7,name:'考勤管理',path:'/attendance',img:require('@/assets/image/7.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
          // {id:8,name:'班级管理',path:'/class',img:require('@/assets/image/8.jpg'),show:true,tip:'当秋风轻柔地拂过大地，秋日的园林宛如一幅绚丽多彩的画卷，缓缓展现在我们眼前。'},
        ]
      }
    },
    methods:{
      changeItem(item){
        this.active = item.id
        this.loading=true
        setTimeout(()=>{
          this.loading=false
        },1000)
        this.$router.push(item.path).catch(err=>{})
      }
    },
    mounted() {
      this.active = this.$route.meta.mateAdmin
    }
  }
</script>

<style scoped lang="scss">
.box-center{
  width: 100%;
  height: calc(100vh - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 150px;
  .center-1{
    width: 1400px;
    height: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .box-card{
      display: block;
      height: 350px;
      background: #fff;
      width: 250px;
      flex-wrap: wrap;
      //border: 1px solid #f6f6f6;
      border-radius: 5px;
      margin:20px 30px;
      box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
      .box-shandow{
        display: none;
        height: 350px;
        background: rgba(0,0,0,0.6);
        width: 250px;
        position: absolute;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        padding: 150px 90px;
        box-sizing: border-box;
      }
      img{
        width: 250px;
        height: 250px;
        border-radius: 5px 5px 0 0;
        object-fit: cover;
      }
      .title{
        font-size: 14px;
        padding:2px 6px;
        font-weight: 600;
        color: #333;
        margin-top: 5px;
        box-sizing: border-box;
      }
      .content{
        font-size: 12px;
        color: #999;
        padding:2px 6px;
        box-sizing: border-box;
      }
    }
    .box-card:hover{
      transform: scale(1.05);
      transition: 0.8s;
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      .box-shandow{
        display: none;
      }
    }
  }
}
.box-center1{
  width: 100%;
  min-height: calc(100vh - 80px);
  display: flex;
  justify-content: space-between;
  .sideEdge{
    width:140px;
    padding-top: 20px;
    box-sizing: border-box;

    .box-side{
      width: 100%;
      height: 50px;
      padding: 0 25px;
      box-sizing: border-box;
      background: #333;
      border-radius: 0 5px 5px 0;
      line-height: 50px;
      font-size: 14px;
      color: #f6f6f6;
      margin-top: 15px;

      text-align: right;
    }
    .box-side-info{
      background: #f8f8f8;
      color: #666;
      transform: translateX(-30px);
      border: 1px solid #f6f6f6;
      box-sizing: border-box;
      margin-top: 15px;
      width:150px;
    }
    .box-side-info:hover{
      background: #333;
      color: #fff;
      transition: 0.8s;
      width: 140px;
      transform: translateX(0px);
    }
  }
  .right{
    width: calc(100vw - 150px);
    min-height: calc(100vh - 80px);
    padding: 15px 30px;

    box-sizing: border-box;
  }
}
</style>
